<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-spin :spinning="loading">
      <a-form
        layout="inline"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-item label="">
          <a-select
            placeholder="请选择省份"
            v-model:value="pageable.provinceCode"
            style="width: 150px"
            @change="handleProvinceChange"
            allowClear
          >
            <a-select-option
              v-for="(item, idx) in provinceOpts"
              :key="idx"
              :value="item.code"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="">
          <a-select
            placeholder="请选择城市"
            v-model:value="pageable.cityCode"
            style="width: 150px"
            @change="handleCityChange"
            allowClear
          >
            <a-select-option
              v-for="(item, idx) in cityOpts"
              :key="idx"
              :value="item.code"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="">
          <a-select
            placeholder="请选择县区"
            v-model:value="pageable.countryCode"
            style="width: 150px"
            allowClear
          >
            <a-select-option
              v-for="(item, idx) in countryOpts"
              :key="idx"
              :value="item.code"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="">
          <a-select
            placeholder="请选择状态"
            v-model:value="pageable.status"
            style="width: 150px"
            allowClear
          >
            <a-select-option
              v-for="(item, idx) in statusOpts"
              :key="idx"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>

        <a-form-item label="">
          <a-input
            style="width: 200px"
            placeholder="请输入搜索内容"
            v-model:value="pageable.searchContent"
            allowClear
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch" html-type="submit">
            搜索
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleAdd" html-type="submit">
            新增
          </a-button>
        </a-form-item>
      </a-form>

      <!-- table start -->
      <a-table
        rowKey="id"
        :defaultExpandAllRows="true"
        :columns="columns"
        :style="{ marginTop: '20px' }"
        :data-source="data"
        :pagination="pageable"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'status'">
            <div v-show="record.status == 'Normal'">正常</div>
            <div v-show="record.status == 'Disable'">禁用</div>
          </template>
          <template v-if="column.key == 'actions'"> </template>
        </template>
      </a-table>
      <!-- table end -->
      <AddModal ref="addModal" />
    </a-spin>
  </a-card>
</template>
<script lang="ts">
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { defineComponent, reactive, ref, UnwrapRef, onMounted } from "vue";
import ResultEnum from "@/config/ResultEnum";
import { tableCols, loadTable, statusOptions } from "./index";
import request from "@/request";
import { confirm } from "@/utils/common";
import AddModal from "../addModal/index.vue";
import EditModal from "../editModal/index.vue";

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
dayjs.locale("zh-cn");

export default defineComponent({
  components: { AddModal, EditModal },
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const data = ref([]);
    const columns = ref(tableCols);
    const statusOpts = ref(statusOptions);

    const provinceOpts = ref([] as any);
    const cityOpts = ref([] as any);
    const countryOpts = ref([] as any);

    const addModal = ref();
    const editModal = ref();

    const pageable = ref({
      pageSize: 10,
      current: 1,
      total: 0,
      searchContent: "",
      status: "",
      provinceCode: "",
      cityCode: "",
      countryCode: "",
      showTotal(total: any, range: any) {
        return "共" + total + "条数据";
      },
    });

    onMounted(() => {
      //加载省份选项
      request({
        url: "/common/areaCode?pcode=0",
        method: "GET",
      }).then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          let result = res.result;
          provinceOpts.value = result;
        }
      });

      loadData();
    });

    const handleSearch = () => {
      pageable.value.current = 1;
      pageable.value.total = 0;
      loadData();
    };

    const loadData = () => {
      loading.value = true;
      loadTable({
        page: pageable.value.current,
        limit: pageable.value.pageSize,
        searchContent: pageable.value.searchContent,
        provinceCode: pageable.value.provinceCode,
        cityCode: pageable.value.cityCode,
        countryCode: pageable.value.countryCode,
        status: pageable.value.status,
        isDelete: "No",
      }).then((res: any) => {
        loading.value = false;

        let records = res.records;
        if (records && records.length > 0) {
          let index = 1;
          for (let item of records) {
            index++;
          }
        }
        data.value = records;
        pageable.value.total = parseInt(res.total);
      });
    };

    const handleTableChange = (pagination: any, filters: any, sorter: any) => {
      pageable.value.current = pagination.current;
      loadData();
    };

    /**
     * 查看收货地址
     * @param record
     */
    const showAddr = (record: any) => {};

    /**
     * 显示订单
     * @param record
     */
    const showOrders = (record: any) => {};

    const handleProvinceChange = (e: any) => {
      pageable.value.provinceCode = e;
      pageable.value.cityCode = "";
      pageable.value.countryCode = "";
      cityOpts.value = [] as any;
      countryOpts.value = [] as any;
      //开始加载城市信息
      request({
        url: "/common/areaCode?pcode=" + e,
        method: "GET",
      }).then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          let result = res.result;
          cityOpts.value = result;
        }
      });
    };

    const handleCityChange = (e: any) => {
      pageable.value.cityCode = e;
      pageable.value.countryCode = "";
      countryOpts.value = [] as any;
      //开始加载城市信息
      request({
        url: "/common/areaCode?pcode=" + e,
        method: "GET",
      }).then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          let result = res.result;
          countryOpts.value = result;
        }
      });
    };

    //新增楼盘信息
    const handleAdd = () => {
      addModal.value.display();
    };

    return {
      loading,
      handleSearch,
      columns,
      data,
      statusOpts,
      pageable,
      handleTableChange,
      showAddr,
      showOrders,
      provinceOpts,
      cityOpts,
      countryOpts,
      handleProvinceChange,
      handleCityChange,
      handleAdd,
      addModal,
      editModal,
    };
  },
});
</script>
